<template>
  <div id="reg">
    <el-card class="login-box">
      <div slot="header" class="clearfix">
        <span>注册</span>
      </div>
      <el-form :model="form" ref="form" size="normal" :rules="rules">
        <el-form-item class="name-box" prop="name">
          <el-input class="name-input" prefix-icon="el-icon-user-solid" v-model="form.name"
                    type="text" :placeholder="namevalue" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item class="tel-box" prop="tel">
          <el-input class="tel-input" prefix-icon="el-icon-phone" v-model="form.tel"
                    type="text" :placeholder="telvalue" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item class="pwd-box" prop="pwd">
          <el-input class="pwd-input" prefix-icon="el-icon-lock" v-model="form.pwd"
                    type="text" :placeholder="pwdvalue" maxlength="20" show-password></el-input>
        </el-form-item>
        <el-form-item class="pwd2-box" prop="pwd2">
          <el-input class="pwd2-input" prefix-icon="el-icon-lock" v-model="form.pwd2"
                    type="text" :placeholder="pwd2value" maxlength="20" show-password></el-input>
        </el-form-item>
        <el-form-item class="lobu-box">
          <el-button class="login-button" type="primary" v-on:click="reg('form')">立即注册</el-button>
        </el-form-item>
        <el-link class="red" v-on:click="tolog()" type="info" :underline="false">返回登陆</el-link>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";

export default {
  data() {
    let ctel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空！'));
      } else if (!Number.isInteger(value / 1)) {
        callback(new Error('请输入正确的手机号格式！'));
      } else if (value < 10000000000) {
        callback(new Error('手机号不足11位！'));
      }
      callback();
    };
    let cpwd = (rule, value, callback) => {
      //检测数据是否符合要求
      if (value === '') {
        //判断数据是否为空
        callback(new Error('确认密码不能为空！'))
        //返回错误信息
      } else if (value !== this.form.pwd) {
        //判断确认密码是否和密码相同
        callback(new Error('两次输入密码不一致！'))
        //返回错误信息
      }
      callback()
      //返回正确信息
    };
    return {
      namevalue: '请输入用户名',
      telvalue: '请输入手机号',
      pwdvalue: '请输入密码',
      pwd2value: '请输入确认密码',
      form: {
        name: '',
        tel: '',
        pwd: '',
        pwd2: '',
      },
      user:{
      },
      fullscreenLoading: false,
      activeName: 'first',
      rules: {
        name: [
          { required: true, message: '用户名不能为空！', trigger: 'blur' },
        ],
        tel: [
          { validator: ctel, trigger: 'blur' },
        ],
        pwd: [
          { required: true, message: '密码不能为空！', trigger: 'blur' },
        ],
        pwd2: [
          { validator: cpwd, trigger: 'blur' },
        ]
      }
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      this.fullscreenLoading = true;
      if(sessionStorage.getItem("user")){
        this.$router.push("/")//登录成功后的页面跳转
      }
      this.fullscreenLoading = false;
    },
    reg(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 调用规则检测输入的数据是否符合要求
          axios.post("api/user", qs.stringify({
            // 使用axios中post请求方式向后端获取数据
            // 在main.js中设置后端端口，请求时自动在url前加入后端地址
              name: this.form.name,
              tel: this.form.tel,
              pwd: this.form.pwd
            // post默认传输非params形式，使用qs将数据转化params形式的数据
            })).then((res) => {
            // 成功从后端获取返回信息
            if(res.data.code === '0') {
              // 后端请求数据成功
              let msg = "&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;账&emsp;号：&emsp;" + res.data.data.id +
                  "<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;用户名：&emsp;" + res.data.data.name +
                  "<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;手机号：&emsp;" + res.data.data.tel +
                  "<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;密&emsp;码：&emsp;" + res.data.data.pwd
              this.$alert(msg, '请确认您的账号信息！', {
                // 账号信息确认框
                confirmButtonText: '确定',dangerouslyUseHTMLString: true,
                // 确认框配置信息
                callback: action => {
                  //返回确认
                  this.$message({
                    showClose: true,
                    type: "success",
                    message: "注册成功！"
                  })
                  // 显示注册成功消息
                  sessionStorage.setItem("user", JSON.stringify(res.data.data))
                  // 创建user窗口缓存
                  setTimeout(() => {location.reload()}, 1000);
                  // 延时1秒刷新页面
                }
              })
            } else {
              // 注册失败
              this.$message({
                showClose: true,
                type: "error",
                message: res.data.msg
              })
              // 显示注册失败消息
            }
          })
        }
      })
    },
    tolog(){
      this.$router.push("/login")//页面跳转
    }
  }
}
</script>

<style scoped>
#reg{
  width: 100%;
  min-height: 666px;
}

.login-box{
  height: 450px;
  width: 450px;
  position: relative;
  left: 50%;
  transform: translate(-50%,20%);
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
  border-radius: 25px;
  justify-content: space-around;
}

/deep/ .el-card {
  border: 0 !important;
}

/deep/ .el-card__header {
  height: 50px;
  font-size: 17px;
  padding: 15px 20px;
  background-color: #354e66;
  font-weight: bold;
  color: #f9bf4b;
}

.name-box{
  padding-top: 20px;
}

.name-box, .tel-box, .pwd-box, .pwd2-box{
  padding-bottom: 25px;
  width: 300px;
  display: flex;
  margin: auto;
  justify-content: center;
}

.name-input, .tel-input, .pwd-input, .pwd2-input {
  width: 300px;
  margin: auto;
}

.lobu-box{
  height: 25px;
}

.red{
  padding-top: 5px;
  font-size: 15px;
}

.login-button{
  width: 120px;
  height: 40px;
  color: #f9bf4b;
  font-size: 17px;
  font-weight: bold;
  background: #354e66;
}
</style>